<template>
  <view class="home-container">
    <!-- 顶部二维码按钮 -->
    <view class="top-bar">
      <view class="qr-btn" @click="onQrClick">
        <image src="https://goat-fizzy-66366927.figma.site/file/qr.png" mode="aspectFit" class="qr-icon"></image>
      </view>
    </view>
    <!-- 中间大耳朵图标 -->
    <view class="logo-area">
      <image src="https://goat-fizzy-66366927.figma.site/file/ear.png" mode="aspectFit" class="ear-icon"></image>
    </view>
    <!-- 信息卡片 -->
    <view class="info-card">
      <view class="info-row">
        <text class="label">对方语言：</text>
        <picker :range="otherLangOptions" @change="onPickerChange('otherLang', $event)">
          <view class="value">{{ otherLangOptions[otherLangIndex] }}</view>
        </picker>
      </view>
      <view class="info-row">
        <text class="label">你的语言：</text>
        <picker :range="myLangOptions" @change="onPickerChange('myLang', $event)">
          <view class="value">{{ myLangOptions[myLangIndex] }}</view>
        </picker>
      </view>
      <view class="info-row">
        <text class="label">收音来源：</text>
        <picker :range="micOptions" @change="onPickerChange('mic', $event)">
          <view class="value">{{ micOptions[micIndex] }}</view>
        </picker>
      </view>
      <view class="info-row">
        <text class="label">音色：</text>
        <picker :range="voiceOptions" @change="onPickerChange('voice', $event)">
          <view class="value">{{ voiceOptions[voiceIndex] }}</view>
        </picker>
      </view>
      <view class="info-row version-row">
        <text class="label">版本：</text>
        <view class="version-dot"></view>
        <text class="version-text">V1.0.0</text>
      </view>
    </view>
    <!-- 续费卡片 -->
    <view class="renew-card">
      <view class="renew-row">
        <text>剩余时长：12小时 24分钟</text>
        <text>余额：25¥</text>
      </view>
    </view>
    <!-- 广告按钮 -->
    <button class="ad-btn" @click="onAdClick">
      <image src="https://goat-fizzy-66366927.figma.site/file/gift.png" class="gift-icon"></image>
      看广告免费续时长
    </button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      otherLangOptions: ['自动'],
      otherLangIndex: 0,
      myLangOptions: ['自动'],
      myLangIndex: 0,
      micOptions: ['手机麦克风'],
      micIndex: 0,
      voiceOptions: ['男声', '女声'],
      voiceIndex: 0
    }
  },
  methods: {
    onQrClick() {
      uni.showToast({ title: '二维码功能开发中', icon: 'none' });
    },
    onPickerChange(key, e) {
      const idx = e.detail.value;
      if (key === 'otherLang') this.otherLangIndex = idx;
      if (key === 'myLang') this.myLangIndex = idx;
      if (key === 'mic') this.micIndex = idx;
      if (key === 'voice') this.voiceIndex = idx;
    },
    onAdClick() {
      uni.showToast({ title: '广告功能开发中', icon: 'none' });
    }
  }
}
</script>

<style>
.home-container {
  min-height: 100vh;
  background: #fff;
  padding: 0 0 30rpx 0;
}
.top-bar {
  width: 100%;
  height: 80rpx;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 30rpx 30rpx 0 0;
}
.qr-btn {
  width: 60rpx;
  height: 60rpx;
  background: #ffc107;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qr-icon {
  width: 36rpx;
  height: 36rpx;
}
.logo-area {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 40rpx 0 30rpx 0;
}
.ear-icon {
  width: 120rpx;
  height: 120rpx;
}
.info-card {
  background: #fff;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
  margin: 0 30rpx;
  padding: 30rpx 20rpx 10rpx 20rpx;
}
.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18rpx 0;
  font-size: 30rpx;
  color: #333;
}
.label {
  color: #666;
}
.value {
  color: #222;
}
.version-row {
  align-items: center;
}
.version-dot {
  width: 12rpx;
  height: 12rpx;
  background: #ff3b30;
  border-radius: 50%;
  margin: 0 10rpx;
  display: inline-block;
}
.version-text {
  color: #888;
  font-size: 26rpx;
}
.renew-card {
  background: #fff;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
  margin: 30rpx 30rpx 0 30rpx;
  padding: 24rpx 20rpx;
}
.renew-row {
  display: flex;
  justify-content: space-between;
  color: #666;
  font-size: 28rpx;
}
.ad-btn {
  margin: 40rpx 30rpx 0 30rpx;
  background: linear-gradient(90deg, #4fc3f7, #1976d2);
  color: #fff;
  font-size: 32rpx;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 88rpx;
  line-height: 88rpx;
  border: none;
}
.gift-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 16rpx;
}
</style> 